<template>
  <div>
    <card>
      <h2>上访人员总量： 10人       在控总量： 7人    脱控总量： 3人</h2>
      <Button style="margin: 10px 0;">数据搜索</Button>
      <tables ref="tables" search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">数据导出</Button>
   </card>
  </div>
</template>

<script>
    import Tables from '_c/tables'
    import { getTableData } from '@/api/data'
    export default {
        name: 'tables_page',
        components: {
            Tables
        },
        data () {
            return {
                columns: [
                    { title: '姓名', key: 'name', sortable: true },
                    { title: '邮箱', key: 'email', editable: true },
                    { title: '身份证号', key: 'createTime' },
                    { title: '生日', key: 'createTime' },
                    { title: '居住地址', key: 'createTime' },
                    { title: '所在区域', key: 'createTime' },
                    { title: '最近出现时间', key: 'createTime' },
                    {
                        title: 'Handle',
                        key: 'handle',
                        options: ['delete'],
                        button: [
                            (h, params, vm) => {
                                return h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '你确定要删除吗?'
                                    },
                                    on: {
                                        'on-ok': () => {
                                            vm.$emit('on-delete', params)
                                            vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
                                        }
                                    }
                                }, [
                                    h('Button', '自定义删除')
                                ])
                            }
                        ]
                    }
                ],
                tableData: []
            }
        },
        methods: {
            handleDelete (params) {
                console.log(params)
            },
            exportExcel () {
                this.$refs.tables.exportCsv({
                    filename: `table-${(new Date()).valueOf()}.csv`
                })
            }
        },
        mounted () {
            getTableData().then(res => {
                this.tableData = res.data
            })
        }
    }
</script>

<style scoped lang="scss">
</style>
